import React, { useRef, useEffect, useState } from 'react';
import ReactEcharts from 'echarts-for-react';
import { Radio, Button } from 'antd';
import {
    FileExcelOutlined,
    FileImageOutlined,
    PieChartOutlined,
    BarChartOutlined,
    LineChartOutlined,
} from '@ant-design/icons';
import XLSX from 'xlsx';
import style from '../../DataBoard.css';
import CustomDatePicker from './CustomDatePicker';
import style2 from './CustomDatePicker.css';
import Loading from '@/components/Loading';

let data = [];
for( let i = 0; i < 30; i++ ) {
    data.push({ date:i + 1, value:10 + Math.round(Math.random() * 10), sameRatio: 20 + Math.random() * 10 })
}
function CoalTrend({ theme, onDispatch }) {
    const echartsRef = useRef();
    const [chartType, setChartType] = useState('line');
    const [sourceData, setSourceData] = useState({});
    const [loading, setLoading] = useState(false);
    let textColor = '#58586f';
    let seriesData = [];
    
    useEffect(() => {
        // setLoading(true);
        // new Promise((resolve, reject) => {
        //     onDispatch({ type: 'board/fetchSingleEnergyCost', payload: { resolve, reject, timeType: '2' } })
        // })
        // .then((data) => {
        //     setSourceData({ cost: data.cost, date: data.date, energy: data.energy });
        //     setLoading(false);
        // })
    }, []);
        seriesData.push({
            type: chartType,
            symbolSize: 6,
            name: '标煤量',
            showSymbol: false,
            data: data.map(i=>i.value),
            areaStyle:{
                color:{
                    type:'linear',
                    x:0,
                    y:0,
                    x2:0,
                    y2:1,
                    colorStops:[
                        {
                            offset:0,
                            color:'rgba(58, 46, 248, 0.15)'
                        },
                        {
                            offset:1,
                            color:'transparent'
                        }
                    ]
                }
            },
            lineStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#3a2ef8', // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: '#7c1ff1', // 100% 处的颜色
                        },
                    ]
                }
            }
        })
    

    return (
        <div className={style['card-container']} style={{ boxShadow: 'none' }}>
            { loading && <Loading /> }
            <div
                className={style['card-container-title']}
                style={{ height: '2rem', borderBottom:'none', lineHeight:'2rem' }}
            >
                <div style={{ display:'flex', alignItems:'center' }}>
                    <span style={{ marginRight: '1rem', color: theme === 'dark' ? '#fff' : '#000' }}>标煤趋势</span>
                    <CustomDatePicker
                        theme={theme}
                        initTimeType='2'
                        onDispatch={(action)=>{
                            // setLoading(true);
                            // new Promise((resolve, reject) => {
                            //     onDispatch({ type: 'board/fetchSingleEnergyCost', payload: { resolve, reject, timeType:action.timeType } })
                            // })
                            // .then((data) => {
                            //     setSourceData({ cost: data.cost, date: data.date, energy: data.energy });
                            //     setLoading(false);
                            // })
                        }}
                    />
                </div>
                <Radio.Group className={style2['custom-radio']} value={chartType} onChange={e=>setChartType(e.target.value)}>
                    <Radio.Button value='bar'><BarChartOutlined style={{ fontSize:'1.2rem', verticalAlign:'middle' }} /></Radio.Button>
                    <Radio.Button value='line'><LineChartOutlined style={{ fontSize:'1.2rem', verticalAlign:'middle' }} /></Radio.Button>
                </Radio.Group>
                {/* <Radio.Group
                    size="small"
                    onChange={(e) => {
                        let value = e.target.value;
                        let fileTitle = chartMaps[item.key];
                        if (value === 'bar' || value === 'line' || value === 'pie') {
                            setChartType(value);
                        }
                        if (value === 'download' && echartsRef.current) {
                            html2canvas(echartsRef.current.ele, {
                                allowTaint: false,
                                useCORS: false,
                                backgroundColor: '#fff',
                            }).then((canvas) => {
                                let MIME_TYPE = 'image/png';
                                let url = canvas.toDataURL(MIME_TYPE);
                                let linkBtn = document.createElement('a');
                                linkBtn.download = fileTitle;
                                linkBtn.href = url;
                                let event;
                                if (window.MouseEvent) {
                                    event = new MouseEvent('click');
                                } else {
                                    event = document.createEvent('MouseEvents');
                                    event.initMouseEvent(
                                        'click',
                                        true,
                                        false,
                                        window,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        false,
                                        false,
                                        false,
                                        false,
                                        0,
                                        null,
                                    );
                                }
                                linkBtn.dispatchEvent(event);
                            });
                        }
                        if (value === 'excel') {
                            var aoa = [],
                                thead = ['成本类型', '单位'];
                            categoryData.map((i) => thead.push(i));
                            aoa.push(thead);
                            seriesData.forEach((item) => {
                                let temp = [];
                                temp.push(item.name, '元', ...item.data);
                                aoa.push(temp);
                            });

                            var sheet = XLSX.utils.aoa_to_sheet(aoa);
                            sheet['!cols'] = thead.map((i) => ({ wch: 16 }));
                            downloadExcel(sheet, fileTitle + '.xlsx');
                        }
                    }}
                >
                    <Radio.Button value="pie">
                        <PieChartOutlined />
                    </Radio.Button>
                    <Radio.Button value="bar">
                        <BarChartOutlined />
                    </Radio.Button>
                    <Radio.Button value="line">
                        <LineChartOutlined />
                    </Radio.Button>
                    <Radio.Button value="excel">
                        <FileExcelOutlined />
                    </Radio.Button>
                    <Radio.Button value="download">
                        <FileImageOutlined />
                    </Radio.Button>
                </Radio.Group> */}
            </div>
            <div
                style={{ width:'100%', height: 'calc( 100% - 2rem)' }}
            >
                <ReactEcharts
                    ref={echartsRef}
                    style={{ height: '100%' }}
                    notMerge={true}
                    option={{
                        tooltip: {
                            trigger: chartType === 'pie' ? 'item' : 'axis',
                        },
                        grid: {
                            top: 40,
                            left: 20,
                            right: 20,
                            bottom: 10,
                            containLabel: true,
                        },
                        xAxis: {
                            show:chartType === 'pie' ? false : true,
                            type: 'category',
                            data: data.map(i=>i.date),
                            silent: false,
                            splitLine: {
                                show: false,
                            },
                            splitArea: {
                                show: false,
                            },
                            axisLabel: {
                                show: true,
                                color: textColor,
                            },
                            axisTick: { show: false },
                            axisLine: { show: true, lineStyle: { color: textColor } },
                        },
                        yAxis: {
                            type: 'value',
                            splitArea: {
                                show: false,
                            },
                            name:'t',
                            nameTextStyle:{ color:textColor },
                            axisLine: { show: false },
                            axisTick: { show: false },
                            splitLine: {
                                show: true,
                                lineStyle : { color: theme === 'dark' ? '#313143' : '#f7f7f7' }
                            },
                            axisLabel: {
                                show: true,
                                color: textColor,
                            },
                        },
                        series: seriesData,
                    }}
                />
            </div>
        </div>
    );
}

export default CoalTrend;
